<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript"
	src="../../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
	src="../../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="../../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">
<style type="text/css">
ul,li {
	margin: 0;
	padding: 0
}

#scrollDiv {
	width: 300px;
	height: 100px;
	min-height: 25px;
	line-height: 25px;
	border: #ccc 1px solid;
	overflow: hidden
}

#scrollDiv li {
	height: 25px;
	padding-left: 10px;
}
</style>
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"
	type="text/javascript"></script>
<script type="text/javascript">
	//滚动插件 
	(function($) {
		$.fn.extend({
			Scroll : function(opt, callback) {
				//参数初始化 
				if (!opt)
					var opt = {};
				var _this = this.eq(0).find("ul:first");
				var lineH = _this.find("li:first").height(), //获取行高 
				line = opt.line ? parseInt(opt.line, 10) : parseInt(this
						.height()
						/ lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度 
				speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒） 
				timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒） 
				if (line == 0)
					line = 1;
				var upHeight = 0 - line * lineH;
				//滚动函数 
				scrollUp = function() {
					_this.animate({
						marginTop : upHeight
					}, speed, function() {
						for (i = 1; i <= line; i++) {
							_this.find("li:first").appendTo(_this);
						}
						_this.css({
							marginTop : 0
						});
					});
				}
				//鼠标事件绑定 
				_this.hover(function() {
					clearInterval(timerID);
				}, function() {
					timerID = setInterval("scrollUp()", timer);
				}).mouseout();
			}
		})
	})(jQuery);
	$(document).ready(function() {
		$("#scrollDiv").Scroll({
			line : 4,
			speed : 500,
			timer : 1000
		});
	});
</script>
</head>
<body>
	<p>多行滚动演示：</p>
	<div id="scrollDiv">
		<ul>
			<li>百度 www.baidu.com</li>
			<li>脚本之家 www.jb51.net</li>
			<li>这是公告标题的第三行</li>
			<li>这是公告标题的第四行</li>
			<li>这是公告标题的第五行</li>
			<li>这是公告标题的第六行</li>
			<li>这是公告标题的第七行</li>
			<li>这是公告标题的第八行</li>
		</ul>
	</div>
</body>
</html>
